<template>
<transition name = "list-fade">
  <div class="playlist" v-show="showflag" @click="hide">
      <div class="playlist-wrapper" @click.stop>
          <div class="listhead">
              <h1 class="title">
                  <i class="icon" :class="iconMode" @click="ChangeMode"></i>
                  <span class="text">{{modetext}}</span>
                  <span class="clear" @click.stop="showconfirm">
                      <i class="icon-delete-normal"></i>
                  </span>
              </h1>
          </div>
          <scroll :refreshDelay = "refreshDelay" class="list-content" ref="listscroll" :data = "sequenceList">
              <transition-group tag="ul" name="list">
                  <li ref="listitem" class="item" v-for="(item,index) in sequenceList" :key = "item.id" @click="selectItem(item,index)">
                      <i class="current" :class="playListIcon(item)"></i>
                      <span class="text">{{item.album}}</span>
                      <span class="like">
                          <i class="icon-favorite-normal"></i>
                      </span>
                       <span class="delete" @click.stop="deleteOne(item)">
                          <i class="icon-delete">X</i>
                      </span>
                  </li>
              </transition-group>
          </scroll>
          <div class="list-oprater">
              <div class="add" @click.stop="showaddsong">
                  <i class="icon-add">+</i>
                  <span class="text">添加歌曲到队列</span>
              </div>

          </div>
          <div class="list-close" @click="hide">
              <span>关闭</span>
          </div>
      </div>
      <confirm ref="confirm" text = "是否清空播放列表" confirmBtnText = "清空" @confirm = "confirmclear"></confirm>
      <addsong ref="addsong"></addsong>
  </div>
</transition>
</template>

<script>
import {mapActions} from 'vuex'
import {playMode} from "commom/js/config.js"
import scroll from "base/scroll/scroll.vue"
import confirm from "base/confirm/confirm.vue"
import {playerMixin} from "commom/js/mixin.js"
import addsong from "components/addsong/addsong.vue"
export default {
    mixins:[playerMixin],
    data(){
        return{
            showflag:false,
            refreshDelay:100
        }
    },
    computed:{
        modetext(){
            return this.playMode === playMode.sequence ? '顺序播放' : this.playMode === playMode.loop ? '单曲循环' : '随机播放'
        }
    },
    methods:{
        show(){
            this.showflag = true;
            setTimeout(()=>{
                this.$refs.listscroll.refresh();
                this.scrolltocurrent(this.currentSong)
            },20)
        },
        hide(){
            this.showflag = false;
        },
        playListIcon(item){
            if(this.currentSong.id === item.id){
                return 'icon-music-normal'
            }
        },
        selectItem(item,index){
            if(this.playMode === playMode.random){
                index = this.playList.findIndex((song)=>{
                    return song.id === item.id
                })
            }
            this.setCurrentIndex(index)
            this.setPlayingState(true)
        },
        scrolltocurrent(current){
            let index = this.sequenceList.findIndex((song)=>{
                return song.id === current.id
            })
            this.$refs.listscroll.scrollToElement(this.$refs.listitem[index],300)
        },
        deleteOne(item){
            this.deleteSong(item)
            if(!this.playList.length){
                this.hide()
            }
        },
        showconfirm(){//显示提示框
            this.$refs.confirm.show()
        },
        confirmclear(){//清空列表
            this.deleteSongList();
            if(!this.playList.length){
                this.hide()
            }
        },
        showaddsong(){
            this.$refs.addsong.show()
        },
        ...mapActions([
            'deleteSong',
            'deleteSongList'
        ])
    },
    watch:{
        currentSong(newval,oldval){
            if(!this.showflag || newval.id === oldval.id){
                return
            }
            this.scrolltocurrent(newval)
        }
    },
    components:{
        scroll,
        confirm,
        addsong
    }
}
</script>

<style lang="stylus" scoped>
@import "~commom/stulys/variable.styl"
@import "~commom/stulys/mixin.styl"
.playlist
    position fixed
    top 0
    bottom 0
    left 0
    right 0
    z-index 997
    background-color $color-background-d    
    .list-close
        line-height 50px
        background-color $color-background
        text-align center
        font-size $font-size-medium-x
        color $color-text-l
    .list-oprater
        width 140px
        margin 20px auto 30px auto
        .add
            display flex
            align-items center
            padding 8px 16px 
            border-radius 100px
            border 1px solid $color-text-l
            color $color-text-l
            .icon-add
                font-size $font-size-small-s
                margin-right 5px
            .text
                font-size $font-size-small    
    .list-content
        max-height 240px
        overflow hidden
        .item
            padding 0 30px 0 20px
            height 40px
            display flex
            align-items center
            overflow hidden
            &.list-enter-active, &.list-leave-active
                transition: all 0.1s
            &.list-enter, &.list-leave-to
                height: 0
            .current
                width 20px
                margin-right 8px
                flex 0 0 12px
                font-size font-size-small
                color $color-theme
            .text
                font-size $font-size-small
                flex 1
                color $color-text-d
            .like
                font-size font-size-small
                margin-right 15px
                color $color-theme
            .delete
                font-size font-size-small    
                color $color-theme
    .playlist-wrapper
        position absolute
        left 0
        bottom 0
        width 100%
        background-color $color-highlight-background
        .listhead
            padding 20px 30px 10px 20px
            .title
                display flex
                align-items center
                .icon
                    width 30px
                    height 30px
                    display inline-block
                    border-radius 50%
                    box-sizing border-box
                    // border 2px solid $color-theme
                    margin-right 10px
                    font-size 26px
                    color $color-theme
                .text
                    flex 1
                    font-size $font-size-medium
                    color $color-text-l
                .clear
                    font-size $font-size-medium   
                    extend-click() 
                    color $color-text-l
    &.list-fade-enter-active,&.list-fade-leave-active
        transition opacity 0.3s
        .playlist-wrapper
            transition all 0.3s
    &.list-fade-enter,&.list-fade-leave-to     
        opacity 0
        .playlist-wrapper
            transform: translate3d(0, 100%, 0)
</style>